<template>
  <div>
    <h1>App</h1>
    <p>a:{{ a }}----b:{{ b }}</p>
    <button @click="addA">addA</button>
  </div>
</template>

<script lang="ts">
 import { defineComponent } from 'vue'
 /* 
  defineComponent:
    - 在定义 Vue 组件时提供类型推导的辅助函数
    - 第一个参数是一个组件选项对象。返回值将是该选项对象本身
    - 因为该函数实际上在运行时没有任何操作，仅用于提供类型推导。

*/
  export default  defineComponent({
    name:'App',
     /* 
    - setup 函数是一个新的组件选项。所有的组合API函数都在此使用，作为在组件内使用 组合API 的入口点，只在初始化时执行一次
    - 本质上是beforeCreate和created两个生命周期函数的合并，无法使用this
    - 函数如果返回对象, 对象中的属性或方法, 模板中可以直接使用
    - 但是直接书写在setup函数的数据不是响应式数据，因为根本没有做响应式处理
  
  */
    setup() {
      let a = 1;
    const addA = () => {
      a++;
      console.log(a);
    };

    const b = 2;

    return { a, b, addA };
  },
    });
</script>

<style lang="less" scoped>
  
</style>
